<template>
	<el-container>
		<el-header>
			<Header></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Aside></Aside>
			</el-aside>
			<el-main>
				<h3 style="text-align: center">预览文章</h3>
				<table width="98%" border class="table table-bordered">
					<tbody>
						<tr>
							<td align="right">ID</td>
							<td>{{ form.itemid }}</td>
						</tr>
						<tr>
							<td align="right">分类</td>
							<td v-html="form.cat_pos"></td>
						</tr>
						<tr>
							<td align="right">标题</td>
							<td>{{ form.title }}</td>
						</tr>
						<tr>
							<td align="right">内容</td>
							<td>
								<div style="width: 600px" v-html="form.content"></div>
							</td>
						</tr>
						<tr>
							<td align="right">缩略图</td>
							<td>
								<img v-if="form.thumb" :src="form.thumb" style="width: 200px" />
							</td>
						</tr>
						<tr>
							<td align="right">状态</td>
							<td>{{ form.flag }}</td>
						</tr>
						<tr>
							<td align="right">添加时间</td>
							<td>{{ form.addtime }}</td>
						</tr>
						<tr>
							<td align="right">编辑时间</td>
							<td>{{ form.edittime }}</td>
						</tr>
						<tr>
							<td align="right">添加人</td>
							<td>{{ form.username }}</td>
						</tr>
						<tr>
							<td align="right">编辑人</td>
							<td>{{ form.editor }}</td>
						</tr>
					</tbody>
				</table>
			</el-main>
		</el-container>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script scoped>
	export default {
		async onLoad(query) {
			let itemid = parseInt(query.itemid);
			const data = await this.$axios.post("/api/article/preview", {
				itemid: itemid,
				formated: 1,
			});
			this.form = data.data;
		},
		data() {
			return {
				form: {},
			};
		},
		async mounted() {},
		methods: {},
	};
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
	}

	.el-main {
		
		color: #333;
	}
</style>
